<template>
  <div v-if="getShow" class="wechat-choice">
    <!-- 选择区域 -->
    <div class="choice-container">
      <div class="choice-title">
        <h3>选择登录方式</h3>
        <p>请选择您希望的登录方式</p>
      </div>

      <div class="choice-options">
        <!-- 绑定已有用户 -->
        <div
          class="choice-item"
          :class="{ active: formData.status === 0 }"
          @click="handleBindExistingUser"
        >
          <div class="choice-icon">
            <Icon icon="ep:user" />
          </div>
          <div class="choice-content">
            <div class="choice-main-text">绑定已有用户</div>
            <div class="choice-sub-text">使用现有账户进行绑定</div>
          </div>
          <div class="choice-indicator">
            <div class="radio-dot" :class="{ checked: formData.status === 0 }"></div>
          </div>
        </div>

        <!-- 创建新用户 -->
        <div
          class="choice-item"
          :class="{ active: formData.status === 1 }"
          @click="handleCreateNewUser"
        >
          <div class="choice-icon">
            <Icon icon="ep:plus" />
          </div>
          <div class="choice-content">
            <div class="choice-main-text">创建新用户</div>
            <div class="choice-sub-text">注册一个全新的账户</div>
          </div>
          <div class="choice-indicator">
            <div class="radio-dot" :class="{ checked: formData.status === 1 }"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="divider-section">
      <div class="divider-line"></div>
      <span class="divider-text">其他方式</span>
      <div class="divider-line"></div>
    </div>

    <!-- 按钮区域 -->
    <div class="button-section">
      <XButton
        :title="t('login.btnMobile')"
        class="primary-button"
        @click="setLoginState(LoginStateEnum.MOBILE)"
      />
      <XButton
        :loading="loginLoading"
        :title="t('login.backLogin')"
        class="secondary-button !ml-0"
        @click="handleBackLogin()"
      />
    </div>
  </div>
</template>

<script setup>
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { weComQuickLogin } from '@/api/wecom/user/index'
import * as authUtil from '@/utils/auth'
const { t } = useI18n()
import { usePermissionStore } from '@/store/modules/permission'
const { setLoginState, getLoginState, handleBackLogin } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.WECHAT_CHOICE)

const formData = reactive({
  status: null // 初始状态为null，表示未选择
})

// 绑定已有用户点击事件
const handleBindExistingUser = () => {
  formData.status = 0
  setLoginState(LoginStateEnum.BIND_NOW_USER)
}
const permissionStore = usePermissionStore()

const redirect = ref('')
// 创建新用户点击事件
const handleCreateNewUser = async () => {
  formData.status = 1
  const wxData = sessionStorage.getItem('userWx')
  const obj = JSON.parse(wxData)
  const res = await weComQuickLogin(obj)
  if (res) {
    authUtil.setTenantId(res.tenantId)
    authUtil.setTenantSign(res.tenantSign)
    authUtil.setToken(res)
    if (!redirect.value) {
      redirect.value = '/'
    }
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
}
</script>

<style lang="scss" scoped>
.wechat-choice {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

// 选择区域
.choice-container {
  flex: 1;
  padding: 0 24px;
}

.choice-title {
  text-align: center;
  margin-bottom: 32px;

  h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
  }

  p {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

.choice-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.choice-item {
  display: flex;
  align-items: center;
  padding: 20px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  &:hover {
    border-color: #407fff;
    background: rgba(64, 127, 255, 0.02);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 127, 255, 0.15);
  }

  &.active {
    border-color: #407fff;
    background: rgba(64, 127, 255, 0.05);

    .choice-icon {
      background: linear-gradient(135deg, #407fff 0%, #5a8cff 100%);
      color: white;
    }

    .choice-main-text {
      color: #407fff;
      font-weight: 600;
    }
  }

  &:active {
    transform: translateY(0);
  }
}

.choice-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  transition: all 0.3s ease;
  flex-shrink: 0;

  :deep(.iconify) {
    font-size: 20px;
    color: #666;
    transition: all 0.3s ease;
  }
}

.choice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.choice-main-text {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  transition: all 0.3s ease;
}

.choice-sub-text {
  font-size: 13px;
  color: #888;
  line-height: 1.4;
}

.choice-indicator {
  margin-left: 12px;
  flex-shrink: 0;
}

.radio-dot {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;

  &.checked {
    border-color: #407fff;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      background: #407fff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

// 分隔线区域
.divider-section {
  display: flex;
  align-items: center;
  margin: 40px 24px 32px;
  gap: 16px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e8e8e8 20%, #e8e8e8 80%, transparent 100%);
}

.divider-text {
  font-size: 13px;
  color: #999;
  white-space: nowrap;
}

// 按钮区域
.button-section {
  padding: 0 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:deep(.primary-button) {
  height: 48px;
  background: #407fff;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: #3a73e6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 127, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

:deep(.secondary-button) {
  height: 48px;
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: #f0f1f2;
    border-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &:active {
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 480px) {
  .choice-container {
    padding: 0 20px;
  }

  .choice-item {
    padding: 16px 12px;
  }

  .choice-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;

    :deep(.iconify) {
      font-size: 18px;
    }
  }

  .choice-main-text {
    font-size: 15px;
  }

  .choice-sub-text {
    font-size: 12px;
  }

  .button-section {
    padding: 0 20px 24px;
  }

  .divider-section {
    margin: 32px 20px 24px;
  }
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .choice-item {
    background: #2a2a2a;
    border-color: #404040;

    &:hover {
      background: rgba(64, 127, 255, 0.1);
      border-color: #407fff;
    }

    &.active {
      background: rgba(64, 127, 255, 0.15);
    }
  }

  .choice-main-text {
    color: #f0f0f0;
  }

  .choice-sub-text {
    color: #aaa;
  }

  .choice-title h3 {
    color: #f0f0f0;
  }

  .choice-title p {
    color: #aaa;
  }

  .divider-text {
    color: #888;
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.choice-item {
  animation: fadeInUp 0.4s ease-out;

  &:nth-child(1) {
    animation-delay: 0.1s;
  }

  &:nth-child(2) {
    animation-delay: 0.2s;
  }
}
</style>
